<template>
  <Tab @goBack="goBack" :tabs="tabs" :current="current">
    <div slot="index">
      <el-form :inline="true" label-width="80px" style="margin-top: 20px;">
        <el-form-item label="订单号">
          <el-input
            v-model="queryParams.orderno"
            placeholder="输入订单号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="用户">
          <el-input
            v-model="queryParams.nickname"
            placeholder="昵称/手机号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="美发师">
          <el-input
            v-model="queryParams.stylistName"
            placeholder="昵称/手机号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="门店">
          <el-input
            v-model="queryParams.storename"
            placeholder="昵称/手机号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="类型">
          <el-select  @keyup.enter.native="handleQuery" v-model="queryParams.servicemodel" placeholder="不限" clearable size="small">
            <el-option
              v-for="dict in typeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="创建时间">
          <el-date-picker
            v-model="daterange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>

      </el-form>
      <el-table v-loading="loading" :data="postList" @sort-change="sortChange">
        <el-table-column label="订单编号" align="center" prop="orderno">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="订单编号" width="250" trigger="hover">
              <div>{{scope.row.orderno}}</div>
              <span slot="reference">{{ scope.row.orderno.substr(0,10)+'...' }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createtime" width="150" sortable="custom"/>
        <el-table-column label="用户" align="center" prop="nickname" :show-tooltip-when-overflow="true"/>
        <el-table-column label="美发师" align="center" prop="stylistName" :show-tooltip-when-overflow="true"/>
        <el-table-column label="商户" align="center" prop="storename" :show-tooltip-when-overflow="true"/>
        <el-table-column label="类型" align="center" prop="servicemodel">
          <template slot-scope="scope">
            <span v-if="scope.row.servicemodel===1">普通订单</span>
            <span class="text-success" v-else-if="scope.row.servicemodel===2">单项套餐</span>
            <span class="text-navy" v-else-if="scope.row.servicemodel===3">多项套餐</span>
            <span class="text-info" v-else-if="scope.row.servicemodel===4">活动订单</span>
          </template>
        </el-table-column>
        <el-table-column label="项目" align="center" prop="ordername" :show-tooltip-when-overflow="true"/>
        <el-table-column label="订单金额" align="center" prop="orderamount">
          <template slot-scope="scope">
            <span>{{scope.row.orderamount|currencyFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column label="优惠券" align="center" prop="couponamount">
          <template slot-scope="scope">
            <span v-if="scope.row.coupontype===1">{{scope.row.couponamount|currencyFilter}}</span>
            <span v-else-if="scope.row.coupontype===2">{{parseFloat(scope.row.couponamount)}}折</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column label="平台补贴" align="center" prop="cashPayAmount">
          <template slot-scope="scope">
            <span v-if="!scope.row.cashPayAmount&&scope.row.coupontype===3">{{scope.row.couponamount|currencyFilter}}</span>
            <span v-else>{{scope.row.cashPayAmount|currencyFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实付" align="center" prop="payamount">
          <template slot-scope="scope">
            <span>{{scope.row.payamount|currencyFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center" prop="status" :formatter="typeFormat" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-link type="primary" @click="handleCurrent('detail',scope.row)">查看详情</el-link>
              <el-link type="primary" v-if="scope.row.status===4||scope.row.status===6">核销</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div slot="detail">
      <Detail :order="order"></Detail>
    </div>
  </Tab>

</template>

<script>
  import Tab from "@/components/Tab";
  import Detail from "../index/detail";
  import {index,statistics} from "@/api/main/order/index";

  export default {
    components: {Tab,Detail },
    data() {
      return {
        order:undefined,
        radio:1,
        total:0,
        daterange:undefined,
        loading: false,
        cardLoading:false,
        postList: [],
        statusOptions: [],
        type:'',
        typeOptions:[{dictLabel:'普通订单',dictValue:1},{dictLabel:'单项套餐',dictValue:2},{dictLabel:'多项套餐',dictValue:3},{dictLabel:'活动订单',dictValue:4}],
        current: 'index',
        tabs: [
          {index: 'index', name: ''},{'index':'detail',name:'订单详情'}
        ],
        statisticsData:{total:{amount:0,count:0},wait:{amount:0,count:0},pending:{amount:0,count:0},complete:{amount:0,count:0},completed:{amount:0,count:0},canceled:{amount:0,count:0}},
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderByColumn: 'T1.createtime DESC',
          orderno: undefined,
          status: 14,
          stylistName:undefined,
          storename:undefined,
          servicemodel:undefined,
        }
      }
    },
    created() {
      this.getDicts("yy_order_status").then(response => {
        this.statusOptions = response.data;
      });
      this.radioList();
      this.getList();
    },
    methods: {
      handleRadioChange(){
        this.radioList();
      },
      radioList(){
        this.cardLoading=true;
        statistics({type:this.radio}).then(response=>{
          this.cardLoading=false;
          this.statisticsData=response.data;
        });
      },
      handleCurrent(str, data) {
        this.order=data;
        this.current = str;
      },
      goBack(message) {
        this.current='index';
      },
      sortChange(params) {
        if (params.prop === 'createtime') {
          let createtime = 'T1.createtime';
          if (params.order === 'ascending') {
            this.queryParams.orderByColumn = createtime + ' ASC';
          } else {
            this.queryParams.orderByColumn = createtime + ' DESC';
          }
        }
        this.getList();
      },
      handleQuery() {
        if(this.daterange){
          this.queryParams.startTime= this.daterange[0]+" 00:00:00";
          this.queryParams.endTime=this.daterange[1]+" 23:59:59";
        }else{
          this.queryParams.startTime=null;
          this.queryParams.endTime=null;
        }
        this.queryParams.pageNum = 1;
        this.getList();
      },
      typeFormat(row, column) {
        let option;
        if (column.property === 'status') {
          option = this.statusOptions;
        }
        return this.selectDictLabel(option, row[column.property]);
      },
      getList() {
        this.loading = true;
        index(this.queryParams).then(response => {
          this.postList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      }
    }
  }
</script>

<style scoped>
  .box-card ul{
    margin: 0;
    padding: 0 0 0 0;
  }
  .box-card ul li{
    display: inline-block;
    font-size: 14px;
    padding: 5px;
    width: 150px;

  }

  .box-card li:first-child{
    width: 80px;
    text-align: center;
  }
</style>
